<template>
  <div class="markdown-preview" v-html="compiledMarkdown"></div>
</template>

<script>
import marked from "marked";
import hljs from "highlight.js";
import "highlight.js/styles/github.css";

export default {
  name: "MarkdownPreview",
  props: {
    content: {
      type: String,
      default: "",
    },
  },
  computed: {
    compiledMarkdown() {
      marked.setOptions({
        renderer: new marked.Renderer(),
        highlight: function (code, language) {
          const validLang = hljs.getLanguage(language) ? language : "plaintext";
          return hljs.highlight(validLang, code).value;
        },
        pedantic: false,
        gfm: true,
        breaks: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: false,
      });

      return marked(this.content);
    },
  },
};
</script>

<style scoped>
.markdown-preview {
  line-height: inherit;
  color: inherit;
}

.markdown-preview >>> pre {
  background: rgba(0, 0, 0, 0.03);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0;
  overflow-x: auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.markdown-preview >>> code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 4px;
  border-radius: 3px;
}

.markdown-preview >>> blockquote {
  border-left: 3px solid #4e8ad1;
  margin: 8px 0;
  padding: 4px 0 4px 12px;
  background: rgba(78, 138, 209, 0.05);
  border-radius: 0 4px 4px 0;
  color: inherit;
}

.markdown-preview >>> table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 13px;
}

.markdown-preview >>> th,
.markdown-preview >>> td {
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
}

.markdown-preview >>> th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

.markdown-preview >>> tr {
  background-color: transparent;
  border-top: none;
}

.markdown-preview >>> tr:nth-child(2n) {
  background-color: rgba(0, 0, 0, 0.02);
}

.markdown-preview >>> h1,
.markdown-preview >>> h2,
.markdown-preview >>> h3,
.markdown-preview >>> h4,
.markdown-preview >>> h5,
.markdown-preview >>> h6 {
  margin: 12px 0 8px 0;
  font-weight: 600;
  color: inherit;
  line-height: 1.4;
}

.markdown-preview >>> h1 { font-size: 16px; }
.markdown-preview >>> h2 { font-size: 15px; }
.markdown-preview >>> h3 { font-size: 14px; }
.markdown-preview >>> h4 { font-size: 14px; }
.markdown-preview >>> h5 { font-size: 13px; }
.markdown-preview >>> h6 { font-size: 13px; }

.markdown-preview >>> p {
  margin: 6px 0;
  line-height: 1.5;
}

.markdown-preview >>> ul,
.markdown-preview >>> ol {
  margin: 6px 0;
  padding-left: 20px;
}

.markdown-preview >>> li {
  margin: 3px 0;
  line-height: 1.5;
}

.markdown-preview >>> a {
  color: #4e8ad1;
  text-decoration: none;
}

.markdown-preview >>> a:hover {
  text-decoration: underline;
}

.markdown-preview >>> strong {
  font-weight: 600;
  color: inherit;
}

.markdown-preview >>> em {
  font-style: italic;
  color: inherit;
}
</style>